<template>
	<div id="index">
		<div class="content">
			<div class="banner">
				
				<div class="enroll">
					<div class="title">立即报名试听课</div>
					
					<div class="row row_1">
						<div class="icon"></div>
						<span class="prefix">86+</span>
						<input class="input" v-model="param.phoneNumber" id="phoneNumber" type="text"
							   autocomplete="off" spellcheck="false" placeholder="输入手机号码" maxLength="20"/>
					</div>
					<div class="row row_2">
						<div class="icon"></div>
						<input class="input" v-model="param.captcha" id="captcha" type="text"
							   autocomplete="off" spellcheck="false" placeholder="输入短信验证码" maxLength="20"/>
						<div class="code" :class="codeTime>0?'code_wait':''" @click="getCode()">{{codeMsg}}</div>
					</div>
					
					<div class="sure_btn" @click="register()">立即报名试听课</div>
				
				</div>
			</div>
			
			<div class="module_01"></div>
			<div class="module_02"></div>
			<div class="module_03"></div>
			<div class="module_04"></div>
			<div class="module_05"></div>
			<div class="module_06"></div>
			<div class="module_07"></div>
			<div class="module_08"></div>
			<div class="module_09"></div>
			<div class="module_10"></div>
			<div class="module_11"></div>
			<div class="module_12"></div>
			<div class="module_13"></div>
			
		</div>
		
		<div class="dialog animated" :class="open? 'fadeIn':'fadeOut'"
			 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
			 
			<div class="panel animated" :class="open? 'zoomIn':''">
				<div class="panel_close" @click="closeDialog()"></div>
				<div class="panel_success"></div>
				<div class="panel_title">
					报名信息提交成功
				</div>
				<div class="panel_text">
					您的课程顾问会在24小时内联系您，请耐心等待。
					<br/>
					您也可以拨打我们的服务热线
					<br/>
					010-8748-4928 / 189-1163-6512
				</div>
			</div>
		</div>
		
		<advert></advert>
	</div>
</template>

<script>
//import '../../js/plugins/jquery.easing.min.js'
import advert from '../common/advert'

var vm;
var $home, $index, topHeight;

export default {
	components : {
		advert
	},
	data : function() {
		return {
			isFixed : false,
			param : {
				phoneNumber : "",
				captcha : ""
			},
			codeMsg : "获取验证码",
			codeTime : 0,
			show : false,
			open : false,
			visible : false,
			eIndex : 0,
			eTimer : null,
			eWait : true
		}
	},
	methods : {
		getCode : function() {
			//等待验证码过程,不允许再点
			if(vm.codeTime>0) {
				return;
			}
			
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $("#phoneNumber"),
				tips : "请输入正确的手机号码"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			//请求发送验证码接口
			api.captcha({phoneNumber : vm.param.phoneNumber}).then(function(data){
				
				if(data.resultCode == 4025) {
					tool.message({type:"warning",message:"短信发送失败，请检查手机号码是否正确"});
				}
				if(data.resultCode == 4033) {
					tool.message({type:"warning",message:"获取验证码操作频繁，请稍候再试"});
				}
				if(data.resultCode == 2000) {
					tool.message({type:"success",message:"已发送验证码"});
					//重设等待时间,执行等待循环
					vm.codeTime = 61;
					vm.waitCode();
				}
			})
			
		},
		waitCode : function() {
			vm.codeTime--;
			
			//还未减到0,更新提示时间
			if(vm.codeTime>0) {
				vm.codeMsg = vm.codeTime+" s"
				setTimeout(vm.waitCode,1000);
				return;
			}
			//已减到0,复原状态
			vm.codeMsg = "获取验证码";
		},
		register : function() {
			
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $("#phoneNumber"),
				tips : tips.phone
			},{
				judge : vm.param.captcha,
				focus : $("#captcha"),
				tips : tips.captcha
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.register(vm.param).then(function(data) {
				if(data.resultCode == 4026) {
					tool.message({type:"warning",message:"验证码错误"});
				}
				if(data.resultCode == 2000 || data.resultCode == 4028) {
					vm.param.phoneNumber = "";
					vm.param.captcha = "";
					
					vm.codeTime = 0;
					vm.codeMsg = "获取验证码";
					
					vm.openDialog();
					//10秒自动关闭
					setTimeout(function(){
						vm.closeDialog();
					},10000)
				}
			})
		},
		openDialog : function() {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
		},
		closeDialog : function() {
			if(!vm.open) {
				return;
			}
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
			
			tool.notify({
	          	title: '小鳄鱼提醒您',
	          	message: '您已经注册成为我们的会员，可以通过手机号+短信验证码登录',
	          	type: 'success',
	          	duration: 10000
	        });
			
		},
	},
	mounted : function() {
        
	},
	created : function() {
		vm = this;
	}
}
</script>

<style scoped lang="scss" src="../../style/home_page/index.css"></style>